<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../libs/vue.js"></script>
  <style>
    .static{
      width:120px;
      height:120px;
      margin:20px;
      text-align: center;
      line-height: 120px;
      font-size: 50px;
    }
    .a{
      background: crimson;
    }
    .b{
      border-radius: 50%;
    }
    .c{
      border:4px solid darkviolet;
      box-shadow:  0px 0px 2px 2px yellow;
    }
    .wrapper{

    }
    .nav{
      display: flex;
    }
    .nav-item{
      width:100px;
      height:40px;
      line-height: 40px;
      text-align: center;
      background: deepskyblue;
      border-radius: 8px;
      color:#fff;
      font-size: 14px;
      margin:0 10px;
      cursor: pointer;
    }
    .nav-active{
      background: brown;
      color:deepskyblue;
    }
    .main{
      width:360px;
      padding:0 10px;
      margin-top:20px;
      box-sizing: border-box;
    }
    .content{
      width:100%;
      height:340px;
      background: brown;
      border-radius: 10px;
      text-align: center;
      line-height: 340px;
      font-size: 40px;
      color:#fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{title }}</h2>
    <div v-if="false">
      <div class="static a b c">1</div>
      <div class="static" :class="'b c'">2</div>
      <div class="static" v-bind:class="myclass">3</div>
      <div class="static" v-bind:class="oneclass">4</div>
      <div class="static" :class="{a:flagA,b:flagB,c:flagC}">5</div>
      <div class="static" :class="classobj"> 6</div>
      <div class="static" :class="[isA,isB,isC]">7</div>
      <hr>
      <div class="static" style="background: red;border-radius: 50%;">8</div>
      <div class="static" :style="{background:'red',borderRadius:'50%',color:'#fff',fontSize:'100px'}"> 9 </div>
      <div class="static" :style="sobj">10</div>
    </div>
    <div>
      <h2>简单的菜单切换</h2>
      <div class="wrapper">
        <div class="nav">
          <div class="nav-item" @click="current=0" :class="current==0?'nav-active':'' ">都市言情</div>
          <div class="nav-item" @click="current=1" :class="current==1?'nav-active':'' ">修真玄幻</div>
          <div class="nav-item" @click="current=2" :class="current==2?'nav-active':'' ">惊悚恐怖</div>
        </div>
        <div class="main">
          <div class="content" :style="{display:current==0?'block':'none'}">都市言情 - 列表1</div>
          <div class="content" :style="{display:current==1?'block':'none'}">修真玄幻 - 列表2</div>
          <div class="content" :style="{display:current==2?'block':'none'}">惊悚恐怖 - 列表3</div>
        </div>
      </div>

    </div>
  </div>

  <script>
    // 添加优雅的离开进入动画 
    const vm = new Vue({
      data:{
        title:"动态的class 和 style 绑定 ",
        myclass:"a b",
        oneclass:['a',"c"],
        flagA:true,
        flagB:false,
        flagC:true,
        classobj:{
          a:true,
          b:false,
          c:false
        },
        isA:'a',
        isB:'b',
        isC:'c',
        sobj:{
          background:"yellow",
          color:"#fff",
          fontSize:"110px",
        },
        current:0
      },
      mounted(){
        document.querySelectorAll("title")[0].innerHTML = this.title; 
      }
    }).$mount("#app")
    // 动态的class 和  style 切换   
    // v-bind 用于 class 和 style 时，Vue.js 做了专门的增强   除了字符串之外，还可以是对象或数组
    // v-bind
    // v-bind:class 
    // :class = " "  {}  []
    // v-bind:style 
    // :style = {}  [{}]
    // :style="{display:current==i?'block':'none'}
  </script>
</body>
</html>